<template>
  <el-dialog
    title="题目预览"
    :visible="isShow"
    @close="closeEvent"
    width="800px"
  >
    <div class="top">
      <p>
        【题型】：<span>{{ data.questionType | TypeQuestion }}</span>
      </p>
      <p>
        【编号】：<span>{{ data.id }}</span>
      </p>
      <p>
        【难度】：<span>{{ data.difficulty | difficult }}</span>
      </p>
      <p>
        【标签】：<span>{{ data.tags }}</span>
      </p>
      <p>
        【学科】：<span>{{ data.subject }}</span>
      </p>
      <p>
        【目录】：<span>{{ data.catalog }}</span>
      </p>
      <p>
        【方向】：<span>{{ data.direction }}</span>
      </p>
    </div>
    <hr />
    <div>【题干】：</div>
    <div style="color: #4646ff" v-html="data.question"></div>
    <hr />
    <div>
      【参考答案】：<el-button type="danger" @click="videoShow = true"
        >视频答案预览</el-button
      >
    </div>
    <video
      width="400"
      height="300"
      controls="controls"
      autoplay
      :src="data.videoURL"
      v-if="videoShow"
    ></video>
    <hr />
    <div>【答案解析】：<span v-html="data.answer"></span></div>
    <hr />
    <div>
      【题目备注】：<span>{{ data.remarks }}</span>
    </div>
    <div style="text-align: right">
      <el-button type="primary" @click="closeEvent">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'Look',
  props: ['data'],
  data () {
    return {
      isShow: false,
      videoShow: false,
      nameList: '',
      dataList: ''
    }
  },
  methods: {
    closeEvent () {
      this.isShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  p {
    width: 190px;
  }
}
</style>
